<template>
  <div>
    <TypeNav></TypeNav><!-- 三级分类导航 -->
    <div class="main">
            <div class="py-container">
                <!--面包屑导航-->
                <div class="bread">
                    <ul class="fl sui-breadcrumb">
                        <li>
                            <a href="#">全部结果</a>
                        </li>
                    </ul>
                    <ul class="fl sui-tag">
                        <li class="with-x" v-show='searchParams.categoryName'>{{searchParams.categoryName}}<i @click='removeCategoryName'>×</i></li>
                        <li class="with-x" v-show='searchParams.keyword'>{{searchParams.keyword}}<i @click='removeKeyword'>×</i></li>
                        <!-- 品牌面包屑 -->
                        <li class="with-x" v-show='searchParams.trademark'>{{trademarkName}}<i @click='removeTrademark'>×</i></li>
                        <!-- 售卖属性面包屑 -->
                                                                                            <!--因为显示的数据不一样，我们只想要整条数据的一部分，所以我们用过滤器过滤一下数据、、 -->
                                                                                                            <!-- 因为props是数组，通过索引就能找到对应的值，删除的时候把要删除项的索引传过去 -->
                        <li class="with-x" v-for="(prop,index) in searchParams.props" :key='prop' >{{prop | formatProp}}<i @click='removeProp(index)'>×</i></li>
                    </ul>
                </div>
                <!-- 搜索器 -->
                            <!-- 定义自定义事件来接收子组件传递回来的数据 -->
                <SearchSelector @get-trademark='saveTrademark' @get-attr="saveAttr"/>
                <!--商品展示区-->
                <div class="details clearfix">
                    <!-- 列表操作区 -->
                    <div class="sui-navbar">
                        <div class="navbar-inner filter">
                            <ul class="sui-nav">
                                <li :class="{active:isPrice}" @click='changeOrder(1)'>
                                    <a href="javascript:;">综合<span class="iconfont" :class="{'icon-zhixiangshang' :isUp,'icon-zhixiangxia':!isUp}" v-show='isPrice'></span></a>
                                </li>
                                <li :class="{active:!isPrice}" @click='changeOrder(2)'>
                                    <a href="javascript:;">价格<span class="iconfont" :class="{'icon-zhixiangshang' :isUp,'icon-zhixiangxia':!isUp}" v-show='!isPrice'></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 商品列表 -->
                    <div class="goods-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-5" v-for='good in goodsList' :key='good.id'>
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <router-link :to="`/detail/${good.id}`"><img :src="good.defaultImg" /></router-link>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥  </em>
                                                <i>{{good.price}}</i>
                                        </strong>
                                    </div>
                                    <div class="attr">
                                        <router-link :to="`/detail/${good.id}`"  :title="good.title" v-html="good.title">{{good.title}}</router-link>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有<span>2000</span>人评价</i>
                                    </div>
                                    <div class="operate">
                                        <a href="success-cart.html" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 分页器 -->
                    <!-- 将数据传到Pagination组件中去渲染 -->
                    <pagination :total='total' :pageSize="searchParams.pageSize" :continues="5" :pageNo="searchParams.pageNo" @change-pageNo="getPageNo"/>
                                                                    <!-- :changePageNo="getPageNo"活动属性传参（点谁谁高亮）   @change-pageNo="getPageNo"自定义事件的方式来传参（点谁谁高亮） -->
                </div>
                <!--hotsale-->
                <div class="clearfix hot-sale">
                    <h4 class="title">热卖商品</h4>
                    <div class="hot-list">
                        <ul class="yui3-g">
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/like_01.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/like_03.png" />
                                    </div>
                                    <div class="attr">
                                        <em>金属A面，360°翻转，APP下单省300！</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/like_04.png" />
                                    </div>
                                    <div class="attr">
                                        <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4068.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有20人评价</i>
                                    </div>
                                </div>
                            </li>
                            <li class="yui3-u-1-4">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="./images/like_02.png" />
                                    </div>
                                    <div class="attr">
                                        <em>Apple苹果iPhone 6s (A1699)</em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                                <em>¥</em>
                                                <i>4088.00</i>
                                            </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有700人评价</i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
// 引入字体图标的样式
import './font/iconfont.css'
import SearchSelector from './SearchSelector/index.vue'
// 不映射数据要用时就要：this.$store.state.模块名.要拿的数据
import {mapGetters, mapState} from 'vuex'
export default {
name:'Search',
data(){
  return {
    //根据接口定义好需要的search参数
    searchParams: {
        category1Id: '', // 一级分类id
        category2Id: '', // 二级分类id
        category3Id: '', // 三级分类id
        categoryName: '', // 分类的名称
        keyword: '', // 关键词
        props: [], // 商品属性
        trademark: '', // 商品品牌
        order: '1:asc', // 排序规则
        pageNo: 1, // 当前页码
        pageSize: 5 // 每页显示的数量
    }
  }
},
computed:{//计算属性
// ...mapState('search',['goodsInfo']),
// 要写很长一截，不方便，直接在store的计算属性里写好再映射来
...mapGetters('search', ['goodsList','total']),
// 显示品牌内容
    trademarkName(){
        // 先从自身数据中解构拿到这一项数据
    const { trademark } = this.searchParams;
    // 看数据有没有，有的话就切割一下，因为数据格式不一样，是id:名字，我们只要名字
    return trademark? trademark.split(":")[1] : "";
    },
    // 判断排序规则  高亮
    isPrice(){
        return this.searchParams.order.split(":")[0] === '1' 
    },
    // 上下
    isUp(){
        return this.searchParams.order.split(":")[1] === 'asc'
    },
},
methods:{//方法
// 封装一个派发给vuex发请求获取数据的函数
search(){
    this.$store.dispatch('search/getSearchGoodsInfoData',this.searchParams)
},
// 1. 删除分类名称==删除后面包屑不显示，地址栏对应项也删掉，根据剩余要求再发请求，
    removeCategoryName(){
    // 分类名称删了就剩关键词了，获取一下关键词
        // console.log(this.$route)
        const { params } = this.$route
    //用剩余参数重新跳转
        this.$router.push({
        name: 'search',
        params
      })
    },
//  2. 删除面包屑中关键词
    removeKeyword(){
        // 关键词删了就剩分类名称了，获取一下分类名称
        // console.log(this.$route)
        const { query } = this.$route
        //用剩余参数重新跳转
        this.$router.push({
        name: 'search',
        query
      })
      //触发自定义事件来删除搜索框里的内容
      this.$bus.$emit('clearKeyword')
    },
// 保存SearchSelector传递过来的trademark品牌数据,
    saveTrademark(trademark){
                                        // 依照接口文档要求的格式存
        this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
        // 根据这个参数再次发请求获取数据
       this.search()
    },
// 删除品牌面包屑
    removeTrademark(){
    //删除品牌面包屑后对应的面包屑不显示，这项数据也不应该有，再根据新参数再发请求获取新数据 
        this.searchParams.trademark = undefined
        this.search()
    },
// 保存SearchSelector传递过来的售卖属性数据,
    saveAttr(attr){
         // 根据接口的要求 需要 商品属性id:商品名称 商品属性
        let {id,attrName,attrValue} = attr//结构出这些数据
        //根据接口文档要求拼接好数据
        let prop = `${id}:${attrValue}:${attrName}`
        //判断一下，如果数据中没有这条数据，就添加，
        if (!this.searchParams.props.includes(prop)) {
        //因为可能这个数组里可能会显示多个，所以不是赋值而是往后添加
            this.searchParams.props.push(prop)
        //添加完成后再根据新数据发请求
        this.search()
        }


    },
// 删除售卖属性面包屑
    removeProp(index){
        // splice方法通过删除或替换现有元素或者原地添加新的元素来修改数组，会改变原数组。
        this.searchParams.props.splice(index,1)
        this.search()
    },
// 获取被点击新的当前页
    getPageNo(newpageno){
        this.searchParams.pageNo = newpageno
        this.search()//重新发请求获取数据
    },
// 更改排序规则(实现单击高亮)
    changeOrder(newNum){
    // 当单击对应项的时候
    // 1. 判断当前项是否有高亮 如果有则变换升序或降序即可
    // 2. 如果当前项没有高亮，则要有高亮效果
    // 先从数据中拿到原来的值和状态                以:切割,得到一个数组 再解构出来
        const [oldNum, oldType] = this.searchParams.order.split(':')
        console.log(newNum,oldNum,newNum==oldNum)
        if (newNum==oldNum) {
            // 此时说明单击的还是高亮的一项，只需要修改升序变降序或降序变升序即可
            this.searchParams.order = `${oldNum}:${oldType === 'asc' ? 'desc' : 'asc'}`
        } else {
            // 此时说明单击的不是高亮的一项，要让他高亮 并默认升序
             this.searchParams.order = `${newNum}:'asc'`
             console.log(this.searchParams.order)
        }
        //根据新数据发请求
        this.search()
    }


},
components:{//组件
    SearchSelector
},
watch:{//监听属性
  $route:{
    immediate:true,// 立马 一开始就立马开启监视oldValue
    handler(newValue){
    // console.log('search',newValue)
    //结构出路由里的参数
    let {query,params} = newValue
    // 1. 先将原来的那些categoryId设置为undefined 因为路由对象会忽略值为undefined的参数
    Object.assign(this.searchParams,{
      category1Id: undefined,
      category2Id: undefined,
      category3Id: undefined,
      categoryName: undefined,
      keyword: undefined
    })
    // 2. 再将传递过来的数据进行赋值
    Object.assign(this.searchParams,query, params)
    // 对象中如果有属性是重复的，后面的会将前面的给覆盖掉

    //发请求获取数据
    this.$store.dispatch('search/getSearchGoodsInfoData',this.searchParams)
    },
  }
},
filters:{//过滤器
//过滤一下售卖属性面包屑显示格式
    formatProp(value){
        //先把数据切割一下
        const arr = value.split(':')
        //按照要求的格式拼接好：属性名：属性值
        return `${arr[2]}:${arr[1]}`
    }
}
}
</script>

<style lang='less' scoped>
.main{
        margin: 10px 0;
        .py-container{
            width: 1200px;
            margin: 0 auto;
            .bread{
                margin-bottom: 5px;
                overflow: hidden;
                .sui-breadcrumb{
                    padding: 3px 15px;
                    margin: 0;
                    font-weight: 400;
                    border-radius: 3px;
                    float:left;
                    li{
                        display: inline-block;
                        line-height: 18px;
                        a{
                            color: #666;
                            text-decoration: none;
                            &:hover{
                                color: #4cb9fc;
                            }
                        }
                    }
                }
                .sui-tag{
                    margin-top: -5px;
                    list-style: none;
                    font-size: 0;
                    line-height: 0;
                    padding: 5px 0 0;
                    margin-bottom: 18px;
                    float: left;
                    .with-x{
                        font-size: 12px;
                        margin: 0 5px 5px 0;
                        display: inline-block;
                        overflow: hidden;
                        color: #000;
                        background: #f7f7f7;
                        padding: 0 7px;
                        height: 20px;
                        line-height: 20px;
                        border: 1px solid #dedede;
                        white-space: nowrap;
                        transition:color 400ms;
                        cursor: pointer;
                        i{
                            margin-left: 10px;
                            cursor: pointer;
                            font: 400 14px tahoma;
                            display: inline-block;
                            height: 100%;
                            vertical-align: middle;
                        }
                        &:hover{
                            color: #28a3ef;
                        }
                    }
                }
            }
            
            .details{
                margin-bottom: 5px;
                .sui-navbar{
                    overflow: visible;
                    margin-bottom: 0;
                    .filter{
                        min-height: 40px;
                        padding-right: 20px;
                        background: #fbfbfb;
                        border: 1px solid #e2e2e2;
                        padding-left: 0;
                        border-radius: 0;
                        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
                        .sui-nav{
                            position: relative;
                            left: 0;
                            display: block;
                            float: left;
                            margin: 0 10px 0 0;
                            li{
                                float: left;
                                line-height: 18px;
                                a{
                                    display: block;
                                    cursor: pointer;
                                    padding: 11px 15px;
                                    color: #777;
                                    text-decoration: none;
                                }
                                &.active{
                                    a{
                                        background: #e1251b;
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
                .goods-list{
                    margin: 20px 0;
                    ul{
                        display:flex;
                        flex-wrap:wrap;
                        li{
                            height: 100%;
                            width: 20%;
                            margin-top: 10px;
                            line-height: 28px;
                            .list-wrap{
                                .p-img{
                                    padding-left: 15px;
                                    width: 215px;
                                    height: 255px;
                                    a{
                                        color: #666;
                                        img{
                                            max-width: 100%;
                                            height: auto;
                                            vertical-align: middle;
                                        }
                                    }
                                }
                                .price{
                                    padding-left: 15px;
                                    font-size: 18px;
                                    color: #c81623;
                                    strong{
                                        font-weight: 700;
                                        i{
                                            margin-left: -5px;
                                        }
                                    }
                                }
                                .attr{
                                    padding-left: 15px;
                                    width: 85%;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                    min-height: 38px;
                                    cursor: pointer;
                                    line-height: 1.8;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    a{
                                        color: #333;
                                        text-decoration: none;
                                    }
                                }
                                .commit{
                                    padding-left: 15px;
                                    height: 22px;
                                    font-size: 13px;
                                    color: #a7a7a7;
                                    span{
                                        font-weight: 700;
                                        color: #646fb0;
                                    }
                                }
                                .operate{
                                    padding: 12px 15px;
                                    .sui-btn{
                                        display: inline-block;
                                        padding: 2px 14px;
                                        box-sizing: border-box;
                                        margin-bottom: 0;
                                        font-size: 12px;
                                        line-height: 18px;
                                        text-align: center;
                                        vertical-align: middle;
                                        cursor: pointer;
                                        border-radius: 0;
                                        background-color: transparent;
                                        margin-right: 15px;
                                    }
                                    .btn-bordered{
                                        min-width: 85px;
                                        background-color: transparent;
                                        border: 1px solid #8c8c8c;
                                        color: #8c8c8c;
                                        &:hover{
                                            border: 1px solid #666;
                                            color: #fff!important;
                                            background-color: #666;
                                            text-decoration: none;
                                        }
                                    }
                                    .btn-danger{
                                        border: 1px solid #e1251b;
                                        color: #e1251b;
                                        &:hover{
                                            border: 1px solid #e1251b;
                                            background-color: #e1251b;
                                            color:white!important;
                                            text-decoration: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .page{
                    width: 733px;
                    height: 66px;
                    overflow: hidden;
                    float:right;
                    .sui-pagination{
                        margin: 18px 0;
                        ul{
                            margin-left: 0;
                            margin-bottom: 0;
                            vertical-align: middle;
                            width: 490px;
                            float: left;
                            li{
                                line-height: 18px;
                                display: inline-block;
                                a{
                                    position: relative;
                                    float: left;
                                    line-height: 18px;
                                    text-decoration: none;
                                    background-color: #fff;
                                    border: 1px solid #e0e9ee;
                                    margin-left: -1px;
                                    font-size: 14px;
                                    padding: 9px 18px;
                                    color: #333;
                                }
                                &.active{
                                    a{
                                        background-color: #fff;
                                        color: #e1251b;
                                        border-color: #fff;
                                        cursor: default;
                                    }
                                }
                                &.prev{
                                    a{
                                        background-color: #fafafa;
                                    }
                                }
                                &.disabled{
                                    a{
                                        color: #999;
                                        cursor: default;
                                    }
                                }
                                &.dotted{
                                    span{
                                        margin-left: -1px;
                                        position: relative;
                                        float: left;
                                        line-height: 18px;
                                        text-decoration: none;
                                        background-color: #fff;
                                        font-size: 14px;
                                        border: 0;
                                        padding: 9px 18px;
                                        color: #333;
                                    }
                                }
                                &.next{
                                    a{
                                        background-color: #fafafa;
                                    }
                                }
                            }
                        }
                        div{
                            color: #333;
                            font-size: 14px;
                            float: right;
                            width: 241px;
                        }
                    }
                }
            }
            .hot-sale{
                margin-bottom: 5px;
                border: 1px solid #ddd;
                .title{
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 21px;
                    border-bottom: 1px solid #ddd;
                    background: #f1f1f1;
                    color: #333;
                    margin: 0;
                    padding: 5px 0 5px 15px;
                }
                .hot-list{
                    padding: 15px;
                    ul{
                        display:flex;
                        li{
                            width:25%;
                            height: 100%;
                            .list-wrap{
                                .p-img,.price,.attr,.commit{
                                    padding-left: 15px;
                                }
                                .p-img{
                                    img{
                                        max-width: 100%;
                                        vertical-align: middle;
                                        border: 0;
                                    }
                                }
                                .attr{
                                    width: 85%;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                    min-height: 38px;
                                    cursor: pointer;
                                    line-height: 1.8;
                                }
                                .price{
                                    font-size: 18px;
                                    color: #c81623;
                                    strong{
                                        font-weight: 700;
                                        i{
                                            margin-left: -5px;
                                        }
                                    }
                                }
                                .commit{
                                    height:22px;
                                    font-size: 13px;
                                    color: #a7a7a7;
                                }
                            }
                        }
                    }
                }
            }
        }
    }  
</style>